<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付</title>
    <link rel="stylesheet" href="./css/public.css">
    <style>
        body {
            background: #F2F1F6;
        }
        .box {
            width: 100%;
            box-sizing: border-box;
            padding: 0.533rem 0.266rem;
        }
        .surplus {
            color: #696969;
            font-size: 16px;
            border-bottom: 1px solid #ededed;
            background: #fff;
        }
        .inputBox {
            background: #fff;
        }
        .inputBox_title {
            color: #E86374;
            font-size: 24px;
            align-items: center;
        }
        .inputBox_input {
            font-size: 16px;
            flex: 1;
            outline: none;
            border: none;
            background: none;
            margin-left: 10px;
        }
        .tips {
            color: #4A494E;
            font-size: 12px;
        }
        .mode {
            background: #fff;
        }
        .mode_title {
            color: #000;
            font-size: 15px;
        }
        .mode_list {
            width: 100%;
            box-sizing: border-box;
            padding-left: 10px;
        }
        .mode_list_li {
            margin: 0 7px;
            margin-top: 20px;
            border: 1px solid #606060;
            width: 100px;
            justify-content: center;
            align-items: center;
            padding: 5px 0;
            cursor: pointer;
        }
        .mode_list_li_active {
            border: 1px solid #E44D62;
            background: #F7F7F7;
        }
        .mode_list_img {
            width: 22px;
            height: 22px;
        }
        .mode_list_text {
            font-size: 14px;
            color: #585858;
            margin-left: 7px;
        }
        .fillIn {
            background: #fff;
            margin-top: 10px;
        }
        .fillIn_left {
            color: #696969;
            font-size: 14px;
        }
        .fillIn_left text{
            color: #f00;
        }
        .fillIn_right {
            flex: 1;
            font-size: 14px;
            outline: none;
            border: none;
            background: none;
            margin-left: 15px;
        }
        .yhkBox {
            display: none;
        }
        .sub_btn {
            width: 95%;
            margin: 0 auto;
            margin-top: 50px;
            background: #FF4D48;
            text-align: center;
            font-size: 15px;
            color: #fff;
            cursor: pointer;
            padding: 15px 0;
            border-radius: 5px;
        }
    </style>
    <script src="./js/index.js"></script>
</head>

<body>
    <main>
        <div class="box surplus">账户剩余金额：553.09元</div>
        <div class="box flex inputBox">
            <div class="inputBox_title">￥</div>
            <input type="text" placeholder="输入" class="inputBox_input">
        </div>
        <div class="box tips">
            <div>提现不能小于5.00元</div>
            <div>提现需要加收30.00%手续费</div>
        </div>
        <div class="box mode">
            <div class="mode_title">提现方式</div>
            <div class="flex mode_list">
                <div data-id="0" class="flex mode_list_li mode_list_li_active">
                    <img src="./img/zfb.png" class="mode_list_img" alt="">
                    <div class="mode_list_text">支付宝</div>
                </div>
                <div data-id="1" class="flex mode_list_li">
                    <img src="./img/yinlian.png" class="mode_list_img" alt="">
                    <div class="mode_list_text">银行卡</div>
                </div>
            </div>
        </div>
        <div class="zfbBox">
            <div class="flex box fillIn">
                <div class="fillIn_left">姓名<text>*</text></div>
                <input type="text" placeholder="请输入正确的姓名" class="fillIn_right">
            </div>
            <div class="flex box fillIn">
                <div class="fillIn_left">账号<text>*</text></div>
                <input type="text" placeholder="请输入正确的支付宝账号" class="fillIn_right">
            </div>
        </div>
        <div class="yhkBox">
            <div class="flex box fillIn">
                <div class="fillIn_left">开户人<text>*</text></div>
                <input type="text" placeholder="请输入正确的姓名" class="fillIn_right">
            </div>
            <div class="flex box fillIn">
                <div class="fillIn_left">开户卡<text>*</text></div>
                <input type="text" placeholder="请输入正确的银行名称" class="fillIn_right">
            </div>
            <div class="flex box fillIn">
                <div class="fillIn_left">账号<text>*</text></div>
                <input type="text" placeholder="请输入正确的银行卡账号" class="fillIn_right">
            </div>
        </div>
        <div class="sub_btn">提交申请</div>
    </main>

    <script src="./js/jquery.js"></script>
    <script>
        $('.mode_list_li').click(function() {
            $('.mode_list_li').removeClass('mode_list_li_active');
            $(this).addClass('mode_list_li_active');
            var modeId = $(this).data().id;
            if(modeId==0) {
                $('.zfbBox').show();
                $('.yhkBox').hide();
            }else {
                $('.zfbBox').hide();
                $('.yhkBox').show();
            }
        });
    </script>
</body>

</html>